<template>
  <div class="index-box" ref="index" v-loading="loading">
    <div class="backBox">
        <span class="back" @click="back"><i class="el-icon-back"></i>返回</span>
    </div>
      <el-card class="box-card" style="margin-top:15px">
        <div slot="header" class="clearfix">
          <span>订单信息</span>
        </div>
        <div class="main">
            <div class="chunk-box">
                <el-form   label-position="right" >
                  <el-form-item label="订单号:"  label-width="125px" >
                      {{orderInfo.orderNo}}
                  </el-form-item>
                  <el-form-item label="商品信息:"  label-width="125px">
                  		<div class="goodsBox" v-for="item in orderItemList">
	                      <div class="img">
	                        <el-image :src="item.goodsImage" fit="fill" v-image-preview="item.goodsImage" class="img" style="width:58px"></el-image>
	                      </div>
	                      <div class="goodsRight">
	                        <div class="goodsName color-444 ellipsis-item font-size-13" style="margin:7px 0 8px 0;height:20px;line-height: 20px;">{{item.goodsName}}</div>
	                        <div class="goodsLabel d-flex" style="height:20px;line-height: 20px;">
	                          <div class="color-999 d-flex margin-right-10 font-size-13" >单价:{{item.salePrice}}</div>
	                          <div class="color-999 d-flex margin-right-10 font-size-13">数量:{{item.goodsNum?item.goodsNum:'1'}}</div>
	                          <div class="color-999 d-flex margin-right-10 font-size-13">规格:{{item.skuName}}</div>
	                        </div>
	                      </div>
	                   </div>
                  </el-form-item>

                  <el-form-item label="订单类型:"  label-width="125px">
                      {{orderInfo.orderType=='1'?'好礼':'好店'}}
                  </el-form-item>
                  <el-form-item label="订单状态:"  label-width="125px">
                      {{orderInfo.statusName}}
                  </el-form-item>
                </el-form>
            </div>
            <div class="chunk-box">
                <el-form   label-position="right" >
                  <el-form-item label="购买数量:"  label-width="125px" >
                      <span class="red" >{{shopLength}}</span>件
                  </el-form-item>
                  <el-form-item label="订单总价(元):"  label-width="125px">
                      <span class="red">¥{{orderInfo.goodsTotalPrice}}</span>
                  </el-form-item>

                  <el-form-item label="已付款(含运费):"  label-width="125px">
                      <span class="red">¥{{orderInfo.actualPayPrice}}</span>
                      <span style="font-size: 14px;color: #606266;margin:0 20px 0 35px;font-weight: 700;">已优惠(元):</span>
                      <span class="red">¥{{orderInfo.couponTotalPrice}}</span>
                  </el-form-item>
                  <el-form-item label="购买人:"  label-width="125px">
                      {{orderInfo.buyUserName}}
                  </el-form-item>
                  <el-form-item label="收货人:"  label-width="125px">
                       {{orderInfo.receiveUser}}【{{orderInfo.receivePhone}}】
                  </el-form-item>
                  <el-form-item label="收货地址:"  label-width="125px">
                        {{orderInfo.receiveAddress}}
                  </el-form-item>
                  <el-form-item label="订单备注:"  label-width="125px">
                      {{orderInfo.remarks}}
                  </el-form-item>
                </el-form>
            </div>
            <div class="chunk-box">
                <el-form   label-position="right" >
                  <el-form-item label="商家门店名称:"  label-width="125px" >
                      {{orderInfo.storeName}}
                  </el-form-item>
                  <el-form-item label="商家类型:"  label-width="125px">
                      {{orderInfo.storeTypeName}}
                  </el-form-item>
                  <el-form-item label="会员类型:"  label-width="125px">
                      	{{orderInfo.levelName}}
                  </el-form-item>
                </el-form>
            </div>
        </div>
      </el-card>


      <div class="bottom" style="margin-top:20px"><!--v-if="afterSaleList.orderStatus>=5"-->
        <el-row :gutter="20">
          <el-col :span="8">
              <el-card class="box-card reason  logistics-box" v-if="orderInfo.orderStatus>2">
                <div slot="header" class="clearfix">
                  <span>物流信息</span>
                </div>
                <el-form label-position="right" >
                  <el-form-item label="创建时间:" label-width="125px" v-if="orderInfo.createTime">
                      {{ parseTime(orderInfo.createTime) }}
                  </el-form-item>
                  <el-form-item label="付款时间:" label-width="125px" v-if="orderInfo.paymentTime">
                      {{ parseTime(orderInfo.paymentTime) }}
                  </el-form-item>
                  <el-form-item label="物流公司:" label-width="125px" v-if="orderInfo.expressName">
                      {{ orderInfo.expressName }}
                  </el-form-item>
                  <el-form-item label="运单号码:" label-width="125px" v-if="orderInfo.expressNumber">
                      {{orderInfo.expressNumber}}
                  </el-form-item>
                  <el-form-item label="发货时间:" label-width="125px" v-if="orderInfo.shipmentTime">
                      {{ parseTime(orderInfo.shipmentTime) }}
                  </el-form-item>
                  <el-form-item label="完成时间:" label-width="125px" v-if="orderInfo.completeTime">
                      {{ parseTime(orderInfo.completeTime) }}
                  </el-form-item>
                  <div class="flow">
                    <el-timeline >
                      <el-timeline-item
                        v-for="(activity, index) in logisticsList"
                        :key="index"
                        :color="index=='0'?'#FF6A18':'#909399'"
                        :timestamp="activity.context">
                        <div :style="{color:(index=='0'?'#FF6A18':'#909399')}">
                           <span class="status" style="margin-right:8px;font-size: 16px;">{{activity.status}}</span><span class="time">{{activity.time | format}}</span>
                        </div>

                      </el-timeline-item>
                    </el-timeline>
                  </div>
                </el-form>
              </el-card>
          </el-col>
          <el-col :span="16" v-if="afterSaleList">
              <el-card class="box-card reason" >
                <div slot="header" class="clearfix">
                  <span>退换/售后</span>
                </div>
              <AfterSaleComponent :afterSaleObj="afterSaleList" :img="attachmentInfoList"></AfterSaleComponent>
              </el-card>
          </el-col>
        </el-row>
      </div>
  </div>
</template>

<script>
  import {getOrderDetail} from '@/api/getData';
  import AfterSaleComponent from '@/views/order/components/afterSaleComponent';
  export default {
  	name:'orderDetail',
    components: {
       AfterSaleComponent
    },
    data() {
      return {
        loading: true,
        dataList:{name:'仟枝氧牌抗菌液10ml',img:'https://cu.shcoolmeal.com/qianzhi_common/upload/cache/images/2021/08_29/f7b3762431648e1b9fed55e9929e1a77_60x60.jpg'},
        attachmentInfoList:[],//凭证图片
        afterSaleList:{},
        orderInfo:{},
        orderItemList:[],//商品订单信息
        shopLength:0,
        logisticsList:[]//物流集合
      }
    },
    filters: {
        format(value) {
          if(value){
            return value.substring(5,16)
          }
        }
      },
    mounted() {
      this.dataInfo();
    },
    methods: {
      back(){
          this.$router.go(-1);//返回上一层
      },
      async dataInfo() {
        try {
          this.loading = true;
          const result = await getOrderDetail({orderId:this.$route.query.id});
          if (result.code == 200) {
            this.afterSaleList = result.data.orderAfterSale;
            this.attachmentInfoList = result.data.attachmentInfoList;
            this.orderItemList = result.data.orderItemList;
            this.shopLength = result.data.orderItemList.length;
            this.orderInfo = result.data.orderInfo;
            this.logisticsList = JSON.parse(result.data.orderInfo.expressTrack).lastResult.data;

            //更新右上角未读消息个数
            this.$EventBus.$emit('getNoticeCountBus')
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },

    }
  }
</script>

<style scoped lang="scss">
  .flow /deep/ .el-timeline-item:first-child .el-timeline-item__content{
    color:#FF6A18
  }
  .flow /deep/ .el-timeline-item__timestamp{
    margin-top:4px;
    line-height: 1.5;
  }
  .flow{
        padding-left: 53px;
        padding-top: 10px;
  }
  .logistics-box /deep/ .el-form-item{
    margin-bottom: 0px;
  }
  .title{
    font-size:16px;
    color:#606266;
  }
  .reason /deep/ .el-card__body{
    background-color:#F1F5F2;
  }
  .index-box{
    height: 100%;
    overflow-y: auto;
  }
  .main{
    display: flex;
    flex-wrap: wrap;
    .chunk-box{
      width: 33%;
      padding: 10px 0;
    }
  }
  .main /deep/ .el-form-item{
    margin-bottom: 10px!important;
  }

  $myColor: #606266;
  .main /deep/ .el-step__line{
    background-color: $myColor;
  }
  .main /deep/ .el-steps,.main /deep/ .el-step__icon-inner{
    color:$myColor;
  }
  .main /deep/ .el-step__title{
    color:$myColor;
    font-size: 14px;
    font-weight: 700;
  }
  .main /deep/ .el-step__icon.is-text{
    border: 2px solid $myColor;
  }
  .main /deep/ .el-steps--vertical{
    height:200px;
  }
</style>
